<template>
	<view class="container">
		<view class="search-bar">
			<u-search placeholder="搜索你要代约的会员" v-model="q" @change="handleKeywordInput" shape="round" :show-action="false"></u-search>
		</view>
		<!-- mescroll-body start -->
		<mescroll-body ref="mescrollRef" top="112" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="member">
				<view class="wd-flex member-cell" v-for="(item,index) in dataList" :key="index" @click="select(item)">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="wd-flex-cell">
						<view class="name">{{ item.username }}<u-icon class="icon" :name="item.gender==2?'man':'woman'" :color="item.gender==2?'#0091FF':'#FF4D94'" size="26"></u-icon></view>
						<view class="info">
							<template v-for="(item2,index) in item.usercard">
								{{ item2.card.name }},
							</template>
						</view>
					</view>
					<!-- <view v-if="item.status==2" class="status">已过期</view>
					<view v-if="item.status==1" class="status col-1">使用中</view>
					<view v-if="item.status==0" class="status col-2">未开卡</view> -->
				</view>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				q: '',
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					// empty: {
					// 	icon: '../../../../static/images/icon_empty-class.png',
					// 	tip: '当天暂无排课，请点击右下角按钮排课'
					// }
				},
				dataList: [
					// {
					// 	id: 1,
					// 	avatar: '../../../static/images/img_product_swiper.png',
					// 	name: '晓丹（会员）11',
					// 	sex: 0,
					// 	info: '瑜伽·课程30次卡',
					// 	status: 0
					// }
					
				],
				result: []
			}
		},
		methods: {
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				let postData = {
				    page: page.num, // 页码, 默认从1开始
				    pagesize: page.size, // 每页数据条数
					q: that.q,
					shop_id: shop_id
				};
				that.$core.get({url:'fitness.manage/user_list',data:postData,success:(ret)=>{
					if(page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
					that.dataList = that.dataList.concat(ret.data.data); //追加新数据
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
			select(data) {
				uni.$emit('selectMember',data)
				uni.navigateBack()
			},
			handleKeywordInput(value) {
				this.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.search-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		padding: 24rpx;
		background: #F6F6F6;
	}
	.member {
		padding: 0 24rpx;
		&-cell {
			border-bottom: 1rpx #E1E1E1 solid;
			padding: 24rpx 0;
			.avatar {
				display: block;
				margin-right: 30rpx;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.name {
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.icon {
				margin-left: 10rpx;
			}
			.info {
				line-height: 40rpx;
				font-size: 24rpx;
				color: #333333;
			}
			.status {
				margin-left: 20rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #999999;
				&.col-1 {
					color: #6D4BBE;
				}
				&.col-2 {
					color: #F5C822;
				}
			}
		}
	}
</style>